<template>
     <div id="app" style="background-color: white;padding: 5px">
     <div style="margin: 5px 0 20px 0;display: flex">
        
         <div style="margin: 0 10px 0 10px">
            <label>模板名称:</label>
            <a-input-search style="width: 200px" enter-button @search="initData" v-model="searchForm.templateName" :loading="loading"></a-input-search>
         </div>
         <a-button v-if="$auth('sys_user_edit')" type="primary" @click="() => { this.visible = true; this.$refs.tempEdit.loading = true}" style="margin-left: 50px">
             新增
         </a-button>
     </div>
     <a-table
             :columns="columns"
             :data-source="tableData"
             :pagination="pagination"
             :loading="loading"
     >
         <span slot="action" slot-scope="text, record">
        <template>
          <div>
            <a-button v-if="$auth('sys_user_edit')" type="primary" @click="handleModel(record.id)">
              编辑
            </a-button>
            <a-button
                    v-if="$auth('sys_user_del')"
                    style="margin-left: 8px"
                    type="danger"
                    @click="delT(record.id)"
            >
              删除
            </a-button>
          </div>
        </template>
      </span>
     </a-table>

     <temp-edit ref="tempEdit"></temp-edit>
 </div>
</template>

<script>
import {pages,del} from '@/api/template'
import TempEdit from './edit'
  export default {
    name: 'index',
    components: {
      TempEdit
    },
    data(){
      return {
        tableData: [],
        loading: false,
        visible: false,
        ids: [],
        columns: [
          {
            title: 'ID',
            dataIndex: 'id'
          },
          {
            title: '模板名称',
            dataIndex: 'templateName'
          },
          {
            title: '模板正则',
            dataIndex: 'templateRegx'
          },
          {
            title: '创建时间',
            dataIndex: 'createDate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ],
        searchForm:{
          pageNo: 1,
          pageSize: 10,
          ntemplateNameame:'',
        },
        pagination: {
          total: 0,
          defaultPageSize: 10, // 每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
          showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
        }
      }
    },
    mounted(){
      this.initData()
    },
    methods:{
      initData(){
        this.loading = true
        pages(this.searchForm).then(response => {
          this.tableData = response.data.content
          this.loading = false
        })
      },
      handleModel(id){
        this.visible = true
        this.$refs.tempEdit.loading = true
        this.$refs.tempEdit.getOne(id)
      },
      delT(id){
        const _this = this;
        _this.$confirm({
          title: '确认删除',
          content: '删除后将不可恢复',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.ids.push(id)
            del(_this.ids).then(res => {
              if (res.code === '0') {
                _this.$message.success('删除成功')
                _this.initData()
              } else {
                _this.$message.error(res.message)
              }
            })
            _this.initData()
          },
          onCancel() {
            this.ids = []
          }
         })
      },
      }
  }
</script>

<style scoped>

</style>
